<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8" />
	<meta name="author" content="Liang wei">
    <meta name="viewport" content="width= device-width , user-scalable=no,initial-scale=1.0" />
	<link rel="stylesheet" href="css/header.css" />
	<link rel="stylesheet" href="css/lunbo.css" />
	<!--<link rel="stylesheet"  href="css/base.css"/>-->
	<!--<link rel="stylesheet" href="css/index.css" />-->
	<!--<script type="text/javascript" src="js/lunbo.js" ></script>-->
	<script type="text/javascript" src="js/jquery-3.1.1.js" ></script>
	<script type="text/javascript" src="js/vue.js" ></script>
	<link rel="stylesheet" href="css/footer.css" />
	
	<style>
		.activity_title{
			/*border: 1px solid red;*/
	       font-size: 30px;
	       color: blue;
	       background: blue;
	      /* background: url(img/change-bgs.png) no-repeat center;*/
         }
			.activity-list{
			   /* border: 1px solid red;*/
			/* border: 1px solid red;*/
				width: 87%;
				height: 240px;
				overflow: hidden;
				margin: 0 5%;
				padding: 0;
				/*display: flex;
				/*justify-content: flex-start;*/*/
			}
			.abc{
				/*border: 1px solid red;*/
				width: 77.5%;
				height: 80px;
				margin: 0 5%;
			}
			.bce{
				/*border: 1px solid red;*/
				width: 80%;
				height: 40px;
				/*border-radius:2px;*/
				border-radius:12px;
				margin-left: 5px;
				text-align: center;
				background: blue;
			}
			
			.activity-list-item{
				/*border: 1px solid red;*/
				position: relative;
			    float: left;
				height: 240px;
				width: 99%;
			
				/*margin: 7px 2.5%;*/
				
				overflow: hidden;
				
			}
			.activity-list-item>img{
			/*	/*border: 1px solid red;*/*/
				width: 100%;
				height: 260px;	
						
			}
			.activity-list-item>div{
			
				/*border: 1px solid red;*/
				position: absolute;
				width: 60%;
				height: 50px;
				top: 80px;
				left: 40px;
			/*	background-color: rgba(0,0,0,0.3);*/
				color: black;
				font-size: 25px;
				font-family: "agency fb";
				text-align: center;
				line-height: 100px;
				
			}
		
	</style>
	</head>
	<body>
		<div>			
		<div>
		<header>
				<img src="img/logo.png"  />
				<form class="search" action="">
					<input class="search_text" type="text" placeholder="搜索" />
				</form>
				<a id="login" href="login.html">登录</a>
				<a id="signin" href="#">注册</a>
		</header>
    	
   </div>
		 <div class="part-one" id="app">
		 	
		     <p class="activity_title">精彩活动</p>
			  <ul class="activity-list">
				<li class="activity-list-item" >					
					<img :src="'http://172.24.10.175/workout/Uploads/'+thumb" />
		
				</li>					 			
			  </ul>
			  
			 <ul class="abc">
			 	<li class="bc">
			 		<p>名字：</p>
			 		<div>{{activity_name}}</div>
			 	</li>
			 </ul>
			 <ul class="abc">
			 	<li class="bc">
			 		<p>介绍：</p>
			 		<div>{{introduction}}</div>
			 	</li>
			 </ul>
				
			 <ul class="abc">
			 	<li class="bc">
			 		<p>开始时间：</p>
			 		<div>{{update_time}}</div>
			 	</li>
			 </ul>
				
				<ul class="abc">
			 	<li class="bc">
			 		<p>开始时间：</p>
			 		<div>{{update_time}}</div>
			 	</li>
			 </ul>
			 
			 
			 <ul class="abc">
			 	<li class="bc">
			 		<p>开始时间：</p>
			 		<div>{{start_date}}</div>
			 	</li>
			 </ul>
			 
			 <ul class="abc">
			 	<li class="bc">
			 		<p>结束时间：</p>
			 		<div>{{end_date}}</div>
			 	</li>
			 </ul>
			 
			 <ul class="abc">
			 	<li class="bc">
			 		<p>地点：</p>
			 		<div>{{province_name}}{{city_name}}{{place}}</div>
			 	</li>
			 </ul>
			 
		 </div>
		</div> 
		
        </div>
     
	<!--尾栏-->
	<div class="footer_box">
		
	          <a href="train2.html"><img src="img/步数.png"/>训练</a>     
               <a href="club.html"><img src="img/运动.png"/>俱乐部</a>
               <a href="index.html"><img src="img/设备.png"/>约建</a>
               <a href="showpicture.html"><img src="img/活动.png"/>晒图</a>   
              <a href="wode.html"><img src="img/首页.png"/>我的</a>
    </div>
	
	
	
	</footer>	
	<!--<script>-->
		<script>
		 	var app=new Vue({
		 		el:"#app",
		 		data:{		 			
		 			thumb:"",		 					 			
		 			activity_name:"",
		 			start_date:"",
		 			end_date:"",
		 			province_name:"",
		 			city_name:"",
		 			place:"",
		 			introduction:"",
		 		    district_name:""
	 		   
		 		},
		 		mounted:function(){
		 			this.getData();
		 		},
		 		methods:{
		 			getData:function(){
                         
              
		 				var id=location.href.split("?")[1].split("=")[1];
		 				var _this=this;
		 				
		 				$.ajax({
		 					type:"get",
		 						
		 					url:"http://172.24.10.175/workout/api.php/lists/mod/activity/id/"+id,
		 					async:true,
		 					dataType:"jsonp",
		 					success:function(data){

		 						_this.thumb=data[0].thumb;
		 						_this.activity_name=data[0].activity_name;
		 						_this.introduction=data[0].introduction;
  		 					    _this.start_date=data[0].start_date;
		 						_this.end_date=data[0].end_date;
		 						_this.province_name=data[0].province_name;
		 						_this.city_name=data[0].city_name;
		 						
		 						_this.district_name=data[0].district_name;
		 						_this.place=data[0].place;
		 					}
		 				});
		 				                      


		 			}
		 		}
		 	});
		 </script>
		
	<!--</script>-->
	</body>
	

</html>
